<template>
	<view class="body">
		<view class="header">
			<infomationVue :query="query"></infomationVue>
			<view class="bottom">
				<view class="row mb">
					<view class="left">
						门店
					</view>
					<view class="right">
						<image :src="$IMG_URL('/static/loading/conversionBg.png')" mode="" class="shop_logo"></image>
						<view class="shop_name">
							温州中庚漫游天地店
						</view>
					</view>
				</view>
				<view class="row mb">
					<view class="left">
						开卡时间
					</view>
					<view class="right">
						<view class="shop_name">
							2024-09-24
						</view>
					</view>
				</view>
				<view class="row">
					<view class="left">
						<text>备注</text>
						<image :src="$IMG_URL('/static/test/remark.png')" mode="aspectFit" class="remark"></image>
					</view>
					<view class="right">
						<view class="shop_name">
							天天来，夕总
						</view>
					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-view">
			<view class="comlum_box">
				<view class="order_box">
					<view class="order_top">
						<view class="title">
							到店情况
						</view>
						<view class="right">
							<view class="size">
								查看详情
							</view>
							<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
						</view>
					</view>
					<view class="order_bottom">
						<view class="comlum_d1 width1">
							<view class="d1_title">
								近7日(次)
							</view>
							<view class="d2_number">
								5
							</view>
						</view>
						<view class="comlum_d1 width2">
							<view class="d1_title">
								近30日(次)
							</view>
							<view class="d2_number">
								12
							</view>
						</view>
						<view class="comlum_d1 width3">
							<view class="d1_title">
								最近一次
							</view>
							<view class="d2_number">
								2024-09-18 16:32:42
							</view>
						</view>
					</view>
				</view>
				
				<view class="order_box">
					<view class="order_top">
						<view class="title">
							上课情况
						</view>
						<view class="right">
							<view class="size">
								查看详情
							</view>
							<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
						</view>
					</view>
					<view class="order_bottom">
						<view class="comlum_d1 width1">
							<view class="d1_title">
								近7日(次)
							</view>
							<view class="d2_number">
								5
							</view>
						</view>
						<view class="comlum_d1 width2">
							<view class="d1_title">
								近30日(次)
							</view>
							<view class="d2_number">
								12
							</view>
						</view>
						<view class="comlum_d1 width3">
							<view class="d1_title">
								最近一次
							</view>
							<view class="d2_number">
								2024-09-18 16:32:42
							</view>
						</view>
					</view>
				</view>
				
				<view class="order_box">
					<view class="order_top">
						<view class="title">
							消费情况
						</view>
						<view class="right">
							<view class="size">
								查看详情
							</view>
							<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
						</view>
					</view>
					<view class="order_bottom">
						<view class="comlum_d1 width1">
							<view class="d1_title">
								近7日(次)
							</view>
							<view class="d2_number">
								5
							</view>
						</view>
						<view class="comlum_d1 width2">
							<view class="d1_title">
								近30日(次)
							</view>
							<view class="d2_number">
								12
							</view>
						</view>
						<view class="comlum_d1 width3">
							<view class="d1_title">
								最近一次
							</view>
							<view class="d2_number">
								2024-09-18 16:32:42
							</view>
						</view>
					</view>
				</view>
			
				<view class="card_box">
					<view class="card_Item">
						<image :src="$IMG_URL('/static/test/card.png')" mode="aspectFill" class="logo1"></image>
						<view class="size1">
							卡包
						</view>
						<view class="size2">
							2
						</view>
						<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
					</view>
					<view class="card_Item">
						<image  :src="$IMG_URL('/static/test/class.png')" mode="aspectFill" class="logo2"></image>
						<view class="size1">
							课程
						</view>
						<view class="size2">
							2
						</view>
						<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
					</view>
					<view class="card_Item">
						<image :src="$IMG_URL('/static/test/tice.png')" mode="aspectFill" class="logo1"></image>
						<view class="size1">
							体测
						</view>
						<view class="size2">
							2
						</view>
						<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
					</view>
				</view>
				
				<view class="order_box">
					<view class="order_top">
						<view class="title">
							跟进记录(近5次)
						</view>
					</view>
					<view class="order_bottom1">
						<view class="Item_deatil mb">
							<view class="content">
								有意到店，有意购买私教课，减脂课。有意到店，有意购买私教课，减脂课。
							</view>
							<view class="time">
								2024-09-18 16:45:27
							</view>
						</view>
						<view class="Item_deatil ">
							<view class="content">
								初次电话沟通
							</view>
							<view class="time">
								2024-09-18 16:45:27
							</view>
						</view>
					</view>
				</view>
				<view class="empty">
					
				</view>
			</view>
		</scroll-view>
		<view class="foot">
			<view class="btn" @click="popupShow = true">
				添加跟进记录
			</view>
		</view>
		<remarkVue :popupShow="popupShow" :content="content" @cancel="cancel" @sure="sure"></remarkVue>
	</view>
	
</template>

<script>
	import remarkVue from './components/remark.vue'
	import infomationVue from './components/infomation.vue'
	export default{
		components:{
			remarkVue,
			infomationVue
		},
		data(){
			return{
				content:'',
				popupShow:false,
				query:{}
			}
		},
		methods:{
			cancel(){
				this.popupShow = false
			},
			sure(){
				this.popupShow = false
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #e9e9e9;
	}
	.body{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.header{
		width: 750rpx;
		height: 456rpx;
		background: #ffffff;
		padding: 0 48rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 2rpx;
		.top{
			padding: 38rpx 0;
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1rpx solid #e9e9e9;
			.img{
				width: 96rpx;
				height: 96rpx;
				background: rgba(0,0,0,0.00);
				border-radius: 50%;
				margin-right: 19rpx;
			}
			.comlum_Y{
				display: flex;
				flex-direction: column;	
			}
			.first{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 18rpx;
				.name{
					margin-right: 16rpx;
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #333333;
				}
				.sex{
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
				.size{
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					color: #000000;
				}
			}
			.scound{
				flex: 1;
				display: flex;
				flex-direction: row;
				align-items: center;
				.logo{
					width: 20rpx;
					height: 30rpx;
					margin-right: 7rpx;
				}
				.number{
					margin-right: 12rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: left;
					color: #666666;
				}
				.call{
					flex: 1;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: left;
					color: #73F0EA;
				}
			}
		}
		.bottom{
			border-top: 1rpx solid #e9e9e9;
			width: 100%;
			display: flex;
			flex-direction: column;
			padding: 42rpx 0 40rpx;
			.mb{
				margin-bottom: 40rpx;
			}
			.row{
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				
				.left{
					width: 160rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: left;
					color: #000000;
					display: flex;
					flex-direction: row;
					align-items: center;
					.remark{
						margin-left: 11rpx;
						width: 30rpx;
						height: 30rpx;
					}
				}
				.right{
					display: flex;
					flex-direction: row;
					align-items: center;
					.shop_logo{
						width: 114rpx;
						height: 36rpx;
						margin-right: 12rpx;
					}
					.shop_name{
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: right;
						color: #333333;
					}
				}
			}
		}
	}
	.scroll-view{
		height: 58vh;
		.comlum_box{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}
	.order_box{
		margin-top: 24rpx;
		width: 702rpx;
		background: #ffffff;
		border-radius: 16rpx;
		padding:0 24rpx;
		.order_top{
			width: 100%;
			height: 86rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1rpx solid #e9e9e9;
			.title{
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #333333;
			}
			.right{
				display: flex;
				flex-direction: row;
				align-items: center;
				.size{
					margin-right: 7rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: right;
					color: #666666;
				}
			}
		}
		.order_bottom{
			width: 100%;
			display: flex;
			flex-direction: row;
			height: 138rpx;
			.width1{
				width: 170rpx;
			}
			.width2{
				width: 184rpx;
			}
			.width3{
				width: 294rpx;
			}
			.comlum_d1{
				display: flex;
				flex-direction: column;
				padding-top: 26rpx;
				.d1_title{
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #666666;
					margin-bottom: 8rpx;
				}
				.d2_number{
					font-size: 24rpx;
					font-family: DIN, DIN-Bold;
					font-weight: 700;
					color: #000000;
				}
			}
		}
		.order_bottom1{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 25rpx 0;
			.mb{
				margin-bottom: 32rpx;
			}
			.Item_deatil{
				display: flex;
				flex-direction: column;
				width: 100%;
				.content{
					width: 100%;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: left;
					color: #000000;
					margin-bottom: 8rpx;
				}
				.time{
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: left;
					color: #666666;
				}
			}
		}
	}
	.empty{
		height: 30rpx;
	}
	.card_box{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		padding: 20rpx 19rpx 0;
		.card_Item{
			width: 224rpx;
			height: 92rpx;
			background: #ffffff;
			border-radius: 16rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 22rpx 0 23rpx;
			.logo1{
				width: 32rpx;
				height: 34rpx;
			}
			.logo2{
				width: 32rpx;
				height: 36rpx;
			}
			.size1{
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #000000;
				margin: 0 8rpx 0 14.42rpx;
			}
			.size2{
				flex: 1;
				font-size: 20rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #666666;
			}
		}
		
	}
	.foot{
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 160rpx;
		background: #ffffff;
		box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(166,179,194,0.30); 
		display: flex;
		justify-content: center;
		padding-top: 10rpx;
		.btn{
			width: 710rpx;
			height: 88rpx;
			background: #73F0EA;
			border-radius: 16rpx;
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>